<template>
  <div class="container">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="orderType" label="订单类型">
      </el-table-column>
      <el-table-column prop="payMoney" label="金额">
      </el-table-column>
      <el-table-column prop="endAddress" label="地址">
      </el-table-column>
      <el-table-column prop="nickName" label="订单信息">
        <el-link type="primary" slot-scope="scope" @click="showDetail(scope)">查看信息
        </el-link>

      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
      <el-table-column prop="publicTime" label="发单时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="orderView(scope)">查看</el-button>
          <el-popconfirm style="margin-left:10px" title="这是一段内容确定
  删除吗？" @confirm="delOrder(scope)">
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-dialog title="订单信息" :visible.sync="dialogVisible">
      <div class="orderDetail">
        <div class="item" v-for="(item,i) in orderInfo" :key="i">
          <span>{{ item.key }}：</span>
          <span v-if="item.key != '图片' && item.key != '打印附件'">{{item.value }}</span>
          <el-image v-else-if="item.key == '图片'" style="width: 100px;height: 100px" :src="item.value" :preview-src-list="[item.value]">
          </el-image>
          <template v-else>
            <el-link type="primary" v-for="file in item.value" :key="file" :href="file" target="_blank">附件{{ i + 1 }}</el-link>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import { formatOrderInfo } from '../utils/util.js'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 20,
      total: 0,
      dialogVisible: false, //订单信息弹窗开关
      orderDetail: [] //订单信息中的内容
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getOrderList()
    },
    getOrderList() {
      this.$http
        .get('/admGetOrders', {
          params: {
            currentPage: this.currentPage,
            pagesize: this.pagesize
          }
        })
        .then(res => {
          //返回的数据在res.data中
          //console.log(res.data)
          if (res.data.status === 'success') {
            this.total = res.data.total
            this.tableData = res.data.result
          } else {
            this.$message.error('服务器错误')
          }
        })
        .catch(err => {
          console.log(err)
          this.$message.error('服务器错误')
        })
    },
    //查看
    orderView(scope) {
      //console.log(scope)
      const { _id } = scope.row
      this.$router.push({
        name: 'OrderView',
        params: {
          _id
        }
      })
    },
    //删除
    delOrder(scope) {
      const { _id } = scope.row
      this.$http
        .get('/delOrder', {
          params: {
            id: _id
          }
        })
        .then(res => {
          if (res.data === 'success') {
            this.$message.success('删除成功')
            this.getOrderList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(error => {
          this.$message.error('删除失败')
        })
    },
    //展示订单详情
    showDetail(scope) {
      this.dialogVisible = true
      //格式化订单内容信息
      this.orderInfo = formatOrderInfo(scope.row)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
}
.orderDetail {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .item {
    text-align: left;
    margin: 5px 0;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      font-weight: bold;
      font-size: 16px;
      width: 80px;
      text-align: right;
    }
  }
}
</style>
